<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Time'sApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="{{bootstrap_css}}" rel="stylesheet">
    <link href="{{framewarp_css}}" rel="stylesheet">
    <link href="{{utils_css}}" rel="stylesheet">
    <link href="{{cloud_css}}" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
      .popover-inner {
        width: auto;
      }

    </style>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">Time'sApp</a>
          <div class="nav-collapse collapse">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {% if unseen|length == 0 %}
                 {% set color = 'white' %}
            {% else %}
                 {% set color = 'red' %}
            {% endif %}
            <a href="javascript:makeSeen();" id='notif' class="navbar-text" style="color:{{color}};"
                rel="popover" data-original-title="Notifications"
                data-content="{% for m in unseen %}<strong>{{m}}</strong><hr>{% endfor %}{% for m in seen %}{{m}}<hr>{% endfor %}">{{unseen|length}}&nbsp;&nbsp;NOTIFICATIONS</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" id='actv' class="navbar-text" style="color:white;"
                rel="popover" data-original-title="Active Challenges"
                data-content="{% for chl in actv %}{{chl}}{% endfor %}">{{actv|length}}&nbsp;&nbsp;ACTIVE CHALLENGES</a>
            <p class="navbar-text pull-right">
              <!--LOGIN BIT!-->
              {{login_text}}
            </p>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    {% if user %}
    <div class="container-fluid">
      <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><div id="displaying">
        {% if state ==3 %}Categories You Own{% endif %}
        {% if state ==2 %}Categories You Edit{% endif %}
        {% if state ==1 %}Categories You View{% endif %}
        {% if state ==6 %}Projects You Own{% endif %}
        {% if state ==5 %}Projects You Edit{% endif %}
        {% if state ==4 %}Projects You View{% endif %}
        </div><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <!--TODO change active index via keyword-->
          <li onClick = "change_display(this)"{% if state ==3 %} class="active"{% endif %}><a href="/?ctype=3">Categories You Own</a></li>
          <li onClick = "change_display(this)"{% if state ==2 %} class="active"{% endif %}><a href="/?ctype=2">Categories You Edit</a></li>
          <li onClick = "change_display(this)"{% if state ==1 %} class="active"{% endif %}><a href="/?ctype=1">Categories You View</a></li>
          <li class="divider"></li>
          <li onClick = "change_display(this)"{% if state ==6 %} class="active"{% endif %}><a href="/?ctype=6">Projects You Own</a></li>
          <li onClick = "change_display(this)"{% if state ==5 %} class="active"{% endif %}><a href="/?ctype=5">Projects You Edit</a></li>
          <li onClick = "change_display(this)"{% if state ==4 %} class="active"{% endif %}><a href="/?ctype=4">Projects You View</a></li>
          <li class="divider"></li>
          <li><a href="#" id="new_cat">Create New Category / Project</a></li>
        </ul>
      </div><!-- /btn-group -->
      <ul class="nav nav-tabs" style="width: 100%;" id='cats'>
        {% for t in tabs %}
          <li {% if loop.index0 == stab %}class="active"{% endif %}><a href="/?ctype={{state}}&tab={{loop.index0}}">{{t}}</a></li>
        {% endfor %}
      </ul><!--/ tabs(cats and proj)-->
      <div class="row-fluid">
        <div class="span3" id="left-wells">
          <div class="well well-large" style="height: 1020px; width: 80%;" id="posts">
            {% if state != 1 and state != 4 %}
            <h2>NEW POST</h2>
            <div class="btn-group">
                <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                  {% for tid in tids[:1] %}
                  <div id="template_name">{{tid.name}}</div>
                  <div id="template_id" style="display:none;">{{tid.id}}</div>
                  {% endfor %}
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  {% for tid in tids %}
                  <li><a href="javascript:switchTid('{{tid.name}}', '{{tid.id}}');">{{tid.name}}</a></li>
                  {% endfor %}
                </ul>
              </div>
            <!--post form goes   here-->
            <form name="newPost" action="/new_post.html/{{cat_id}}/{{tem_id}}/" method="POST" id="post_block"><!--CHANGE THIS!!!!!!!!!!-->
              {{post_content}}
              <button type="submit" id="post_submit" class="btn btn-primary">Save</button>
            </form>
            <a href="#" id="popost"><button type="button" class="btn btn-info">Expand</button></a>
            {% endif %}
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span7" id="main">
          <!--main-->
           {% if cat_id %}
           <div class="row-fluid">
            <div class="span3">
              <button type="button" class="btn btn-info" id="poptags"
                      rel="popover" data-placement="right"
                      data-content='<div id="wordcloud" style="width: 300px; height: 220px; position: relative;"></div>'
                      data-original-title="<strong>TAGS</strong>">Show Tags</button>
            </div>
            <div class="span6" style="text-align:center;">
              <button type="button" class="btn btn-warning" id="ichallenge">Issue Challenge</button>
            </div>
            <div class="span3" style="position:relative;overflow:hidden;">
              {% if priv_num == 100 %}
              <button type="button" class="btn btn-success" id="share_this" style="position:absolute;right:0;">Share This</button>
              {% endif %}
            </div>
          </div>
          {% if priv_num == 100 %}
          <div id="sharing" style="display: none;">
            <br>
            <div class="row-fluid">
              <div class="well well-large span12" style="position: relative;">
                <form class="form-inline" id="share_form" action="/share/" method="post">
                  <input type="hidden" name="added">
                  <div class="input-append">
                    <input class="span8" id="temp" type="text" placeholder="Username">
                    <button class="btn" type="button" id="add_to" onClick="add_share($('#temp')[0].value);$('#temp')[0].value='';">Add</button>
                  </div>
                  <label>as: </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <select name="share_as">
                    <option value=1>Viewers</option>
                    <option value=2>Editors</option>
                    <option value=3>Owners</option>
                  </select>
                  <button class="btn btn-success" type="button" id="final_share" style="position:absolute;right:20px;">Share</button>
                </form>
                <ul id="shared_with">
                </ul>
              </div>
            </div>
          </div>
          {% endif %}
          </br>
          <div class="progress progress-striped" style="width: 100%;">
            <div id="privies" class="bar" style="width: {{priv_num}}%;"
                rel="popover" data-placement="top"
                data-content="{{priv_data}}"
                data-original-title="{{priv_state}}"></div>
          </div>
          <iframe src="basic_list.html?cat_id={{cat_id}}" seamless width="100%" height=1020 id="main_frame"></iframe>
          {% endif %}
        </div>
        <div class="span2" id="layouts_panel">
          <div class="well well-large" style="height: 1020px; width: 100%;">
            <h2>LAYOUTS</h2>
            <!--layouts go here-->
            <ul class="nav nav-list" id="layouts">
              <li onClick="activate('layouts', this);" class="active"><a href="javascript: jumpTo('basic_list.html')">Basic List</a></li>
              <li onClick="activate('layouts', this);"><a href="javascript: jumpTo('prioritised_list.html')">Prioritised List</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

    </div><!--/.fluid-container-->
    {% else %}
    Please log in
    {% endif %}

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{jquery_js}}"></script>
    <script src="{{bootstrap_js}}"></script>
    <script src="{{japp_js}}"></script>
    <script src="{{utils_js}}"></script>
    <script src="{{framewarp_js}}"></script>
    <script src="{{cloud_js}}"></script>
    <script>
    /*
    #######################################################FRAMEWARPS################################
    */
    $('#login').frameWarp({url:'login.html'});
    $('#new_cat').frameWarp({url:'new_category.html', height: 250});
    $('#popost').frameWarp({url:'post.html/'+$('#template_id').text()+'?ret=706f73742e68746d6c2f303f7570646174653d74727565',
      height: 800, weight: 700});
    $('#poptags').frameWarp({url:'tags.html?cat={{cat_id}}'});
    $('#ichallenge').frameWarp({url:'challenge.html/{{cat_id}}/'});
    
    //####################################################POPOVERS########################################
    $('#privies').popover({html:true});
    $('#notif').popover({html:true, placement:'bottom'});
    $('#actv').popover({html:true, placement:'bottom'});
    /*
    #########################################################SHARING######################################
    */
    {% if priv_num == 100 %}
    $('#share_this').click(function () {
      $("#sharing").slideToggle("slow");
      $('#temp').focus();
    });

    $('#final_share').click(function () {
      $('#add_to').click();
      var children = document.getElementById('shared_with').children;
      var form = document.getElementById('share_form')
      var i;
      for (i = 0; i < children.length; i++){
        var t = children[i].innerText;
        form.added.value += t + ',';
      }
      form.submit();
    });

    function add_share(user){
      var l = document.getElementById('shared_with')
      l.innerHTML += make_enclosed_item(user);
    }
    var keys = {};

    $('#temp').keydown(function (e) {
      keys[e.which] = true;
      });

    $('#temp').keyup(function (e) {
      if (keys[18] && keys[65] && keys[17]){
        $('#add_to').click();
      }
      if (keys[18] && keys[83] && keys[17]){
        $('#final_share').click();
      }
      delete keys[e.which];
      });
    {% endif %}
    /*
    ######################################################KEY BINDINGS########################################
    */
    $('#post_title').keydown(function (e) {
      keys[e.which] = true;
      });

    $('#post_title').keyup(function (e) {
      if (keys[18] && keys[83] && keys[17]){
        $('#post_submit').click();
      }
      delete keys[e.which];
      });

     $('#priority').keydown(function (e) {
      keys[e.which] = true;
      });

    $('#priority').keyup(function (e) {
      if (keys[18] && keys[83] && keys[17]){
        $('#post_submit').click();
      }
      delete keys[e.which];
      });

    $('#content').keydown(function (e) {
      keys[e.which] = true;
      });

    $('#content').keyup(function (e) {
      if (keys[18] && keys[83] && keys[17]){
        $('#post_submit').click();
      }
      delete keys[e.which];
      });

    $(window).keydown(function (e) {
      keys[e.which] = true;
      });

    $(window).keyup(function (e) {
      if (keys[18] && keys[67] && keys[17]){
        $('#new_cat').click();
      }
      delete keys[e.which];
      });
    /*
    #####################################################FUNCTIONS###########################################
    */
    function jumpTo(page){
      //this function is used to switch between layouts
      var ext = '';
      var cur = document.getElementById('main_frame').src;
      if (cur.indexOf('?') > -1){
        ext = cur.substring(cur.indexOf('?'), cur.length);
      }
      document.getElementById('main_frame').src = page + ext;
    }
    function switchTid(name, id){
      $('$template_name').text(name);
      $('$template_id').text(id);
      $('$post_block').action("/new_post.html/{{cat_id}}/"+ id.toString() +"/");
    }

    function makeSeen(){
      $.ajax({url : '/all_seen/'}).done(function() {
        $('#notif').text('0 NOTIFICATIONS');
        document.getElementById("notif").style = 'color:white;';
      });
    }

    function finish(pid){
            $.ajax({url : '/finish/' + pid.toString()}).done(function() {
                $('#' + pid.toString()).removeClass("alert-info");
                $('#' + pid.toString()).addClass("success-info");
            });
        }

    function accept(chid, nid){
      $.ajax({url : '/accept/' + chid.toString() + '/' + nid.toString() + '/'}).done(function() {
                window.location.reload();
            });
    }
    function decline(chid, nid){
      $.ajax({url : '/decline/' + chid.toString() + '/' + nid.toString() + '/'}).done(function() {
                window.location.reload();
            });
    }
    </script>
  </body>
</html>
